<template>
  <div style="width: 1100px;margin: 0 auto;margin-top: 80px">
    <div>
      <h2 style="color: black;">订单信息</h2>
<!--      <el-button-group @select="handle">
        <el-button index = "3">全部</el-button>
        <el-button index = "0" >处理中</el-button>
        <el-button index = "1" >已完成</el-button>
      </el-button-group>-->
      <el-menu mode="horizontal" @select="handle" default-active="3" active-text-color="orange">
        <el-menu-item index="3">全部</el-menu-item>
        <el-menu-item index="0">待支付</el-menu-item>
        <el-menu-item index="1">租赁中</el-menu-item>
        <el-menu-item index="2">已完成</el-menu-item>
      </el-menu>
      <el-table :data="orderArr" style="height: 610px">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column style="" label="车型图" width="200px">
          <template slot-scope="scope">
            <img :src="'http://localhost:19283'+scope.row.imgUrl" width="80px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="cash" label="租金"></el-table-column>
        <el-table-column prop="cashPledge" label="押金"></el-table-column>
        <el-table-column prop="createTime" label="预约时间" width="250px"></el-table-column>
        <el-table-column label="订单详情" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="success"
                       @click="handleEdit(scope.$index, scope.row)">订单详情
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="danger"  v-if="scope.row.status==0"
                       @click="handleDelete(scope.$index, scope.row)">取消订单
            </el-button>
            <el-button size="mini" type="primary"  v-if="scope.row.status==0"
                       @click="handlePay(scope.$index, scope.row)">前往支付
            </el-button>
            <el-button size="mini" type="info" v-if="scope.row.status==1"
                       @click="handleReturn(scope.$index, scope.row)">立即还车
            </el-button>
            <el-button size="mini" type="warning" v-if="scope.row.status==2||scope.row.status==3"
                       @click="handleDrop(scope.$index, scope.row)">删除订单
            </el-button>
          </template>
        </el-table-column>
        <!--空状态-->
        <div slot="empty" style="text-align: left;">
          <el-empty description="哎呀，您是不是忘记心仪的订单了！"/>
        </div>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="8"
          layout="prev, pager, next, jumper"
          :total= total>
      </el-pagination>
    </div>
    <div>
      <el-form>
        <el-divider></el-divider>
        <p style="color: darkgrey">订单状态说明</p>
        <el-divider></el-divider>
        <el-row butten="10" style="">
          <el-col :span="8">
            <h3 style="color: yellowgreen">待支付</h3>
            <p>您的订单已提交，正在处理中</p>
          </el-col>
          <el-col :span="8">
            <h3 style="color: aqua">租赁中</h3>
            <p>车辆正在租赁过程中,请注意<br>租赁时间</p>
          </el-col>
          <el-col :span="8">
            <h3 style="color: red">已完成</h3>
            <p>已还车，订单结算完毕</p>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>

      </el-form>
    </div>


  </div>
</template>

<script>
export default {
  name: "OrderView",
  data() {
    return {
      type: 1,
      orderArr: [],
      user: localStorage.user?JSON.parse(localStorage.user).user:null,
      currentPage: 1, // 当前页码，与后端同步
      pageSize: 8, // 每页显示的数量，可以根据实际情况修改
      total: 0, // 总数量，从后端获取
      page : 1,
    }
  },
  methods: {
    handleDrop(i,order){
      if (confirm("您确认删除此订单吗?")) {
        this.axios.post('http://localhost:19485/orders/'+order.id+'/drop').then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("删除订单成功");

            this.axios.post("http://localhost:19483/city/"+order.cityId+"/add");
           /* // 更改车辆状态
            let status = 0;
            this.axios.post("http://localhost:19482/car/"+order.carId+"/update/"+status);*/

            this.orderArr.splice(i, 1)
          }
        })
      }
    },
    handlePay(i,order){
      console.log(order.id)
      let url = 'http://localhost:19485/alipay/pay';
      let params = {
        outTradeNo: order.id,
        subject: '租车支付订单',
        totalAmount : order.cash + order.cashPledge
      }
      window.open(url+'?'+this.qs.stringify(params));
    },
    handleReturn(i,content){
      let status = 2;
      this.axios.get('http://localhost:19485/orders/' +content.id + "/update/" + status)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("还车成功！")
              this.axios.post("http://localhost:19483/city/"+content.cityId+"/add");
              // 更改车辆状态,改为可用
              let status = 0;
              this.axios.post("http://localhost:19482/car/"+content.carId+"/update/"+status);


            }
          })
    },
    handle(key, ketPath) {
      // key= index
      console.log(key);
      this.loadContents(key);
    },
    loadContents(status) {
      if (status==3){
        this.axios.get('http://localhost:19485/orders/' + this.user.username + "/list")
            .then((response) => {
              if (response.data.state == 20000) {
                this.orderArr = response.data.data.list;
              }
            })
      }else {
        this.axios.get('http://localhost:19485/orders/' +this.user.username + "/" + status + "/index")
            .then((response) => {
              if (response.data.state == 20000) {
                this.orderArr = response.data.data.list;
              }
            })
      }
    },
    handleEdit(i,content) {
      this.$router.push('/detail?id='+content.carId);
    },
    handleDelete(i, orders) {
      if (confirm("您确认取消此订单吗?")) {
        this.axios.post('http://localhost:19485/orders/' + orders.id + '/delete').then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("取消订单成功");

            // 更改车辆状态
            let id = orders.carId;
            let status = 0;
            this.axios.post("http://localhost:19482/car/"+id+"/update/"+status);

            // 增加城市车余量
            this.axios.post("http://localhost:19483/city/"+orders.cityId+"/add");

            this.orderArr.splice(i, 1)
          }
        })
      }
    }
  },
  handleCurrentChange(currentPage) {
    console.log(`当前页: ${currentPage}`);
    let user = localStorage.user ? JSON.parse(localStorage.user).user : null
    this.page = currentPage;
    this.axios.get("http://localhost:19482/orders/" + user.username + "/list/"+currentPage)
        .then((response)=>{
          if (response.data.state==20000){
            // pageData
            this.orderArr = response.data.data.list;
          }
        })
  },

  /*loadOrders() {
    let user = localStorage.user ? JSON.parse(localStorage.user) : null
    if (location.search.includes('status')) {
      let status = new URLSearchParams(location.search).get('status')
      this.axios.get('http://localhost:19485/orders/' + user.username + '/' + status + '/index').then((response) => {
        if (response.data.state == 20000) {
          this.orderArr = response.data.data.list
        }
      })
    } else {
      this.axios.get('http://localhost:19485/orders/' + user.username + '/list').then((response) => {
        if (response.data.state == 20000) {
          this.orderArr = response.data.data.list
        }
      })
    }
  },*/


  mounted() {
    let user = localStorage.user ? JSON.parse(localStorage.user).user : null
    console.log(this.user)
    this.axios.get('http://localhost:19485/orders/' + user.username + '/list/'+this.currentPage).then((response) => {
      if (response.data.state == 20000) {
        this.orderArr = response.data.data.list
        this.total=response.data.data.total;
      }
    })
  }
}
</script>

<style scoped>

</style>

<style>
p {
  margin: 0;
}
</style>